<div class="panel panel-default">
  <div class="panel-heading">
    Notes
    <span class="pull-right btn-group">
      <a href="" class="btn btn-xs btn-success" ui-sref="^.add()">
        <i class="fa fa-plus"></i>
      </a>
    </span>
  </div>

  <div class='list-group'>
    <div ng-repeat="item in ctrl.notes" class="list-group-item">
    <span class="pull-right btn-group">
      <a href="" class="btn btn-xs btn-default" ui-sref="^.edit({id: item.id})">
        <i class="fa fa-pencil"></i>
      </a>
      <a href="" class="btn btn-xs btn-danger" ui-sref="^.delete({id: item.id})">
        <i class="fa fa-trash-o"></i>
      </a>
    </span>
      <h4 class="list-group-item-heading">
        <a href="" ui-sref="^.view({id: item.id})">{{item.title}}</a>
      </h4>

      <p class="list-group-item-text">{{item.body}}</p>
    </div>
    <div ng-show="!ctrl.notes.length" class="list-group-item">
      <h4 class="list-group-item-heading" translate>
        There are no notes
      </h4>

      <p class="list-group-item-text" translate>Click <a href="" ui-sref="^.add">here</a> to add a note!</p>
    </div>
  </div>

</div>
